<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="Image/x-icon" href="pictures/icons/fav-ico.ico" rel="icon" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Lilita+One&family=PT+Sans+Narrow:wght@400;700&family=Raleway:wght@100&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/style.css" />
    <title>Borodinski</title>
  </head>
  <body>
    <div class="wrapper">
      <header class="header">
        <div class="header__groups">
          <nav class="header__navigation">
            <a href="about-us.html" class="header__btn btn-us">О нас</a>
						<a href="shop.html" class="header__btn btn-catalog">
              Каталог</a>
						<a href="questions.html" class="header__btn btn-questions">
              Частые вопросы</a>
          </nav>
          <div class="header__group-2">
            <a href="#" class="header__btn btn-find">
              <img src="pictures/icons/search.svg" alt="ПОИСК" />
            </a>
            <div class="header__basket basket">
              <a
                href="#popover"
                class="header__btn btn-basket popover-link"
              >
                <img
                  class="btn-basket__icon"
                  src="pictures/icons/cart.svg"
                  alt="КОРЗИНА"
                />
                <p class="basket__goods-number">0</p>
              </a>
              <div id="popover" class="basket__popover basket-popover popover">
                <div class="popover__content">
                  <div class="close-popover">
                    <a type="button" class="close-popover__btn">
                      <img src="pictures/icons/cart-black.svg" alt="" />
                      <p class="basket__goods-number">0</p>
                    </a>
                  </div>
                  <h2 class="basket-popover__title">Корзина</h2>
                  <div class="basket-popover__list">
                    <div class="basket-popover__good-wrapper">
                      <div class="basket-popover__good-info">
                        <h3>Стрижка машинкой</h3>
                        <p>800 ₽</p>
                      </div>
                      <div class="basket-popover__delete-btn">
                        <button type="button">
                          <img src="pictures/icons/trash.svg" alt="" />
                        </button>
                      </div>
                    </div>
                    <div class="basket-popover__good-wrapper">
                      <div class="basket-popover__good-info">
                        <h3>Стрижка усов</h3>
                        <p>1200 ₽</p>
                      </div>
                      <div class="basket-popover__delete-btn">
                        <button type="button">
                          <img src="pictures/icons/trash.svg" alt="" />
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <a
              href="#popup"
              type="button"
              class="header__btn btn-enter popup-link"
              >Вход</a
            >
          </div>
        </div>
      </header>
      <main class="main">
        <div class="main__background-container">
          <img
            src="pictures/backgroundjpg.jpg"
            alt=""
            class="main__background"
          />
        </div>
        <!-- Приветствие Блок №1 -->
        <div class="main__greeting greeting">
          <div class="greeting__logo">
            <img
              src="pictures/icons/logo-full-dark.svg"
              alt="Logo"
              class="logo-img"
            />
          </div>
          <div class="greeting__labels">
            <div class="greeting__text-block-1 label-block">
              <h2 class="block-1__title label-title">Быстро</h2>
              <img
                src="pictures/icons/bullet.svg"
                alt="*"
                class="block-1__img label-img"
              />
              <p class="block-1__paragraph label-paragraph">
                Мы делаем свою работу быстро! Два часа пролетят незаметно, и вы
                — счастливый обладатель стильной стрижки-минутки!
              </p>
            </div>
            <div class="greeting__text-block-2 label-block">
              <h2 class="block-2__title label-title">Круто</h2>
              <img
                src="pictures/icons/bullet.svg"
                alt="*"
                class="block-2__img label-img"
              />
              <p class="block-2__paragraph label-paragraph">
                Забудьте, как вы стриглись раньше.<br />Мы сделаем из вас звезду
                футбола или кино!<br />Во всяком случае внешне.
              </p>
            </div>
            <div class="greeting__text-block-3 label-block">
              <h2 class="block-3__title label-title">Дорого</h2>
              <img
                src="pictures/icons/bullet.svg"
                alt="*"
                class="block-3__img label-img"
              />
              <p class="block-2__paragraph label-paragraph">
                Наши мастера — профессионалы своего дела и не могут стоить
                дешево. к тому же, разве цена не даёт определённый статус?
              </p>
            </div>
          </div>
        </div>
        <!-- Услуги Блок №2 -->
        <div class="main__servises servises">
          <!-- Популярные услуги -->
          <div class="servises__popular-servises popular-servises">
            <h2 class="popular-servises__title main-block-title">
              Популярные услуги
            </h2>
            <ul class="popular-servises__list list">
              <li>
                <div class="list__card card">
                  <p class="card__name">Стрижка машинкой</p>
									<p class="card__price">800 ₽</p>
									<div class="card__vector vector-1">
                </div>
              </li>
							<li>
                <div class="list__card card">
                  <p class="card__name">Стрижка усов</p>
									<p class="card__price">1200 ₽</p>
									<div class="card__vector vector-2">
                </div>
              </li>
							<li>
                <div class="list__card card">
                  <p class="card__name">Груминг</p>
									<p class="card__price">400 ₽</p>
									<div class="card__vector vector-3">
                </div>
              </li>
							<li>
                <div class="list__card card">
                  <p class="card__name">Комплексная стрижка</p>
									<p class="card__price">2300 ₽</p>
									<div class="card__vector vector-4">
                </div>
              </li>

            </ul>
            <button
              type="button"
              class="popular-servises__check-all-btn main-btn-type-1"
            >
              <p>Посмотреть все</p>
              <img src="pictures/icons/arrow-right.svg" alt="" />
            </button>
          </div>

          <!-- Галерея -->
          <div class="servises__gallery gallery">
            <h2 class="gallery__title main-block-title">Фотогалерея</h2>
            <div class="gallery__swiper swiper-container" tabindex="-1">
              <div class="swiper-wrapper">
                <!-- Слайды -->
                <div class="swiper-slide">
                  <img
                    src="pictures/pictureOfWorking.jpg"
                    alt=""
                    class="gallery__img"
                  />
                </div>
                <div class="swiper-slide">
                  <img
                    src="pictures/pictureOfWorking_2.jpg"
                    alt=""
                    class="gallery__img"
                  />
                </div>
                <div class="swiper-slide">
                  <img
                    src="pictures/pictureOfWorking_4.jpeg"
                    alt=""
                    class="gallery__img"
                  />
                </div>
                <div class="swiper-slide">
                  <img
                    src="pictures/pictureOfWorking_3.jpg"
                    alt=""
                    class="gallery__img"
                  />
                </div>
              </div>
              <!-- Стрелки управления -->
              <div class="swiper-button-prev my-prev"></div>
              <div class="swiper-button-next"></div>
              <!-- Пагинация -->
              <div class="swiper-pagination my-pagination"></div>
            </div>
          </div>
        </div>
        <!-- Информация Блок №2 -->
        <div class="main__information information">
          <div class="information__contacts contacts">
            <h2 class="contacts__title main-block-title">Контакты</h2>
            <div class="contacts__block-1">
              <h3 class="contacts__subtitle main-block-subtitle">
                Барбершоп «Бородинский»
              </h3>
              <p class="contacts__info">
                Санкт-Петербург, набережная реки Карповки, 5, литера П.
              </p>
              <h2 class="contacts__phone-number">+7 800 555-35-35</h2>
            </div>
            <div class="contacts__block-2">
              <h3 class="contacts__subtitle">Время работы</h3>
              <p class="contacts__time-of-working">
                пн—пт: с 10:00 до 22:00<br />сб—вс: с 10:00 до 19:00
              </p>
              <div class="block-2__btns">
                <button type="button" class="contacts__route main-btn-type-1">
                  Как проехать
                </button>
                <button type="button" class="contacts__feedback">
                  Обратная связь
                </button>
              </div>
            </div>
          </div>

          <!-- Записаться Блок №2 -->
          <div class="information__appointment appointment">
            <h2 class="appointment__title main-block-title">Записаться</h2>
            <p class="appointment__paragraph">
              Укажите желаемую дату и время и мы свяжемся с вами для
              подтверждения брони.
            </p>
            <form action="#" method="get" class="appointment__form full-form">
              <div class="top-form">
                <div class="full-form__date">
                  <label class="full-form__label" for="date"
                    ><p class="label__text">Дата</p>
                    <div class="label__img-div"></div
                  ></label>
                  <input
                    class="full-form__input"
                    type="text"
                    name="date"
                    placeholder="01.01.2023"
                  />
                </div>
                <div class="full-form__time">
                  <label class="full-form__label" for="time"
                    ><p class="label__text">Время</p>
                    <div class="label__img-div"></div
                  ></label>
                  <input
                    class="full-form__input"
                    type="text"
                    name="time"
                    placeholder="12:00"
                  />
                </div>
                <div class="full-form__phone">
                  <label class="full-form__label" for="phone"
                    ><p class="label__text">Телефон</p></label
                  >
                  <input
                    class="full-form__input"
                    type="tel"
                    name="phone"
                    placeholder="+7 (999) 999-99-99"
                  />
                </div>
              </div>
              <div class="bottom-form">
                <div class="full-form__name">
                  <label class="full-form__label" for="name"
                    ><p class="label__text">Ваше имя</p></label
                  >
                  <input
                    class="full-form__input"
                    type="text"
                    name="name"
                    placeholder="Введите ваше имя..."
                  />
                </div>
              </div>
              <div class="full-form__subscribe-container">
                <button
                  class="full-form__subscribe main-btn-type-1"
                  type="submit"
                >
                  Записаться
                </button>
              </div>
            </form>
          </div>
        </div>
      </main>
      <!-- Футер -->
      <footer class="footer">
        <div class="footer__wrapper">
          <div class="footer__info footer-left">
            <img
              src="pictures/icons/logo-short-dark.svg"
              alt="BORODINSKI"
              class="footer-left__short-logo"
            />
            <p class="footer-left__paragraph">
              Санкт-Петербург, набережная<br />
              реки Карповки, 5, литера П.
            </p>
            <h3 class="footer-left__phone">+7 800 555-86-28</h3>
            <a href="" class="footer-left__link">Как нас найти?</a>
          </div>
          <div class="footer__offers footer-middle">
            <h3 class="footer-middle__title footer-title">
              Получайте лучшие предложения
            </h3>
            <div class="footer__form">
              <input
                class="footer-middle__email-form"
                type="text"
                placeholder="Введите ваш email"
              />
              <button class="submit-email-btn">
                <img src="pictures/icons/arrow-tail-right.svg" alt="" />
              </button>
            </div>
          </div>
          <div class="footer__social-media footer-right">
            <h3 class="footer-right__title footer-title">Давайте дружить</h3>
            <a class="footer-right__btn btn-sotial-media" href="https://github.com/ProCodeZero" target="_blank">
              <p>Профиль gitHub</p>
              <img src="pictures/icons/gitHub.png" alt="" width="auto%" />
            </a>
            <p class="footer-right__signature">
              Created by: <span class="creator">Hollow_DS</span>
            </p>
          </div>
        </div>
      </footer>
      <!-- Popup -->
      <div id="popup" class="popup">
        <div class="popup__body">
          <div class="popup__content">
            <a href="#" class="popup__close close-popup"
              ><img src="pictures/icons/cross.svg" alt=""
            /></a>
            <div class="popup__title">Личный кабинет</div>
            <div class="popup__box-1">
              <input class="popup__form-1 full-form__input" type="text" />
              <input class="popup__form-2 full-form__input" type="password" />
            </div>
            <div class="popup__box-2">
              <div class="popup__checkbox-container checkbox">
                <label class="check option">
                  <input class="check__input" type="checkbox" checked /><span
                    class="check__box"
                  ></span
                  >Запомнить меня
                </label>
              </div>
              <a class="foggot-password" href="">Забыл пароль</a>
            </div>
            <button class="popup-btn-enter" type="submit">Войти</button>
            <button class="popup-btn-registration" type="submit">
              Регистрация
            </button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>
